<template>
  <div class="admin-order-manage">
    <el-form label-position="left" label-width="90px">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="订单号：">
            <el-input v-model="param.orderNumber" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单状态：">
            <el-select v-model="param.status" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option
                v-for="(item, key, index) in ORDER_STATUS"
                :key="index"
                :label="item"
                :value="Number(key)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-action">
      <el-button type="primary" @click="showAdd = true">导入订单</el-button>
    </div>
    <el-table :data="tableList" max-height="520" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="买家信息：">
              <span>{{props.row.realName}} {{props.row.mobile}} {{props.row.deliveryLocation}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" min-width="40"></el-table-column>
      <el-table-column label="商品" min-width="200">
        <span slot-scope="scope">
          <div class="item-img">
            <img :src="scope.row.itemMainImg" />
          </div>
          <div class="item-sku">
            <p>{{scope.row.itemName}}</p>
            <p
              v-for="(key, value, index) in JSON.parse(scope.row.skuAttr)"
              :key="index"
            >{{value}}：{{key}}</p>
          </div>
        </span>
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单号" min-width="100"></el-table-column>
      <el-table-column label="购买数量" min-width="50">
        <span slot-scope="scope">×{{scope.row.quantity}}</span>
      </el-table-column>
      <el-table-column label="支付方式" min-width="100">
        <span slot-scope="scope">{{PAY_TYPE[scope.row.payType]}}</span>
      </el-table-column>
      <el-table-column label="应付金额" min-width="80">
        <span slot-scope="scope" class="fee">{{scope.row.price | formatPrice}}</span>
      </el-table-column>
      <el-table-column label="订单状态" min-width="80">
        <span slot-scope="scope">{{ORDER_STATUS[scope.row.status]}}</span>
      </el-table-column>
      <el-table-column label="下单时间" min-width="120">
        <span slot-scope="scope">{{moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <div>
            <a class="action" @click="goDetail(scope.row.id)">详情</a>
            <a class="action" v-if="scope.row.status === 1">立即付款</a>
            <a class="action" v-if="scope.row.status === 2">发货</a>
            <a class="action" v-if="scope.row.status === 3">查看物流</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="tableFoot">
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-size="param.pageSize"
          :page-sizes="[10,20,30,40,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      width="500px"
      title="从excel导入"
      v-if="showAdd"
      :visible.sync="showAdd"
      :lock-scroll="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <ImportOrder @close="closeAdd"/>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import ImportOrder from "./components/import-order";
export default {
  name: "admin-order-manage",
  components: {
    ImportOrder
  },
  props: {
    name: {
      type: String
    }
  },
  data() {
    return {
      moment: moment,
      PAY_TYPE: this.$common.PAY_TYPE,
      ORDER_STATUS: this.$common.ORDER_STATUS,
      editForm: {},
      tableList: [],
      param: {
        pageNo: 1,
        pageSize: 10,
        orderNumber: ""
      },
      total: 0,
      showAdd: false
    };
  },
  computed: {},
  methods: {
    closeAdd() {
      this.showAdd = false;
    },
    goDetail(id) {
      this.$router.push({ path: `/order/orderdetail/${id}` });
    },
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.param.pageNo = val;
      this.getTableData();
    },
    search() {
      this.param.pageNo = 1;
      this.getTableData();
    },
    getTableData() {
      if (this.param.dateRange) {
        this.param.startDate = this.param.dateRange[0];
        this.param.endDate = this.param.dateRange[1];
      }
      this.$api.order.pagingOrder(this.param).then(res => {
        this.tableList = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>

<style lang="scss" scoped>
.admin-order-manage {
}
</style>